<!--
* @Description: 上传文件组件
-->

<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <el-form ref="formCost"  label-width="80px">
        <el-form-item label="费用导入" prop="path">
          <el-upload ref="uploadRef" :multiple="false" :action="uploadUrl" :headers="headers" :http-request="chunkUpload" :on-error="onError" :on-success="handleSuccess" accept=".xlsx, .xls, .csv" class="upload-demo" drag name="file">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/csv文件，且列名不能重复</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCgDialog">取 消</el-button>
        <el-button type="primary" @click="submitCostCgForm">确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import chunkUpload from "@/utils/chunkUpload";
import { getToken } from "@/utils/auth";

export default {
  name: "uploadFileComponent",
  data() {
    return {
      dialogTitle: "上传文件",
      dialogVisible: false,

      //新文件上传
      chunkUpload: chunkUpload, // 文件上传
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin/system/upload_fileM/", //文件上传的路径
      headers: {
        Authorization: "Bearer " + getToken()
      },
      filePath: ''
    }
  },
  methods: {
    // 失败回调
    onError() {
      this.$message.error("文件上传失败！");
      this.$refs.uploadRef.clearFiles();
    },
    /** 文件上传成功调用的钩子函数 */
    handleSuccess(data) {
      console.log(data,'=======上传成功的回调========');
      this.filePath = data.saveFile
      this.$message.success("文件上传成功！");
    },

    // 文件path上传接口
    submitCostCgForm() {
      // this.dialogVisible = false;
      console.log('文件上传成功');
    },
    // 弹窗关闭事件
    closeCgDialog() {
      this.dialogVisible = false;
      this.$refs.uploadRef.clearFiles();
    },
    //弹窗显示事件
    showDialog(val) {
      this.dialogVisible = true;
      console.log(val);
    },
  }
};
</script>

<style scoped>

</style>
